<template>
  <button @click="handleClick">axios访问服务器</button>
  <table border="1" width="500" align="center">
    <caption><h2>作者信息</h2></caption>
    <tr align="center">
      <td>姓名</td>
      <td>性别</td>
      <td>出生地</td>
    </tr>
    <tr v-for="(item, index) in lists" :key="index" align="center">
      <td>{{item.name}}</td>
      <td>{{item.sex}}</td>
      <td>{{item.city}}</td>
    </tr>
  </table>
</template>

<script>
import { reactive, toRefs } from 'vue'
import axios from 'axios'

export default {
  setup () {
    const state = reactive({
     lists: []
    })
    const handleClick = () => {
    // 获取远端图片
        axios({
            method:'get',
            url:'http://localhost',
            responseType:'stream'
            })
            .then(function(response) {
                response.data.pipe(fs.createWriteStream('favicon.ico'))
            }
        )
    }
    return {
      ...toRefs(state),
      handleClick
    }
  }
}
</script>
